<%--
  Created by IntelliJ IDEA.
  User: 17675
  Date: 2025/5/22
  Time: 14:32
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!--设置模板生成的基本路径，保证所有的url资源都是重根目录出发的-->
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>

<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Register</title>
    <!--设置模板生成的基本路径，保证所有的url资源都是重根目录出发的-->
    <base href="<%=basePath%>">

    <!--使用bootsrap前端框架，快速开发，这里引入框架的网络引擎接口-->
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
</head>


<body>

<!--从框架给的模板中，复制出自己想要的内容进行修改-->
<div class="container">
    <h1 style="text-align: center">用户管理系统---注册</h1>

    <div class="row">
        <div class="col-md-3"></div>

        <div class="col-md-6">
            <!--这里的表单提交中：action由于配置了基础路径所以这里就不加/了，如果不配置基本路径，加/浏览器默认是站点根目录而不是相对路径，就需要再加上缺失路径
            enctype="multipart/form-data"说明的是表单提交中包含多种类型的格式文件，因为我们这里需要上传文件，所以这样设置
            -->
            <form action ="user/register" method="post" enctype="multipart/form-data">
                <div class="form-group">
                    <label for="username">用户名</label>
                    <!--一定注意，id是标签在前端框架中的唯一确定，class是样式类型种类，name是与后端交互属性-->
                    <input type="text" class="form-control" id="username" name="username" placeholder="用户名"><span id="msg" style="color:red"></span>
                </div>
                <div class="form-group">
                    <label for="username">密码</label>
                    <input type="password" class="form-control" id="password" name="password" placeholder="密码">
                </div>
                <div class="form-group">
                    <label for="profile">头像</label>
                    <input type="file" id="profile" name="profile">
                </div>
                <button type="submit" class="btn btn-default">注册</button>
                <a href="login.jsp">登陆</a>
            </form>
        </div>

        <div class="col-md-3"></div>
    </div>
</div>
<!--实现异步刷新请求，在不刷新页面的情况下ajax发送请求，通过返回请求刷新部分内容
<script>
    // let usernameInput = document.getElementById("username");
    // usernameInput.addEventListener("blur",function(){
    //     ajax("POST","user/checkUserName","username="+usernameInput.value,function (data){
    //         if(data === "yes"){
    //             document.getElementById("msg").innerText = "用户名已经存在"
    //         }else{
    //             document.getElementById("msg").innerText = "用户名合规"
    //         }
    //     });
    // })
    // function ajax(method, url, data, fun){
    //     //创建一个对象（小弟帮我们发送请求）
    //     var xhr = new XMLHttpRequest()
    //     console.log(xhr.readyState)
    //     // => 0
    //     // 初始化 请求代理对象
    //
    //     //建立连接
    //     xhr.open(method, url)
    //     xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded;charset=utf-8")
    //
    //     console.log(xhr.readyState)
    //     // => 1
    //     // open 方法已经调用，建立一个与服务端特定端口的连接
    //
    //     //发送报文
    //     xhr.send(data)
    //
    //     //监听事件
    //     xhr.addEventListener('readystatechange', function () {
    //         switch (this.readyState) {
    //             case 2:
    //                 // => 2
    //                 // 已经接受到了响应报文的响应头
    //
    //                 // 可以拿到头
    //                 // console.log(this.getAllResponseHeaders())
    //                 console.log(this.getResponseHeader('server'))
    //                 // 但是还没有拿到体
    //                 console.log(this.responseText)
    //                 break
    //
    //             case 3:
    //                 // => 3
    //                 // 正在下载响应报文的响应体，有可能响应体为空，也有可能不完整
    //
    //                 // 在这里处理响应体不保险（不可靠）
    //                 console.log(this.responseText)
    //                 break
    //
    //             case 4:
    //                 // => 4
    //                 // 一切 OK （整个响应报文已经完整下载下来了）
    //
    //                 // 这里处理响应体
    //                 console.log(this.responseText)
    //                 //回调函数,拿到对应的返回值
    //                 fun(this.responseText);
    //                 break
    //         }
    //     })
    // }
</script>-->

<%--注册用户名输入框，失去焦点的异步请求--%>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/2.2.1/jquery.js"></script>
<script>
    //这是官方给的ajax，也可以直接用下面post实现
    // let usernameInput = document.getElementById("username");
    // usernameInput.addEventListener("blur",function(){
    //     $.ajax("user/checkUserName",{
    //         contentType:"application/x-www-form-urlencoded",
    //         data:{username: usernameInput.value},
    //         type:"post",
    //         success:function(data,textStatus, jqXHR){
    //             if(data === "yes"){
    //                 document.getElementById("msg").innerText = "用户名已经存在"
    //             }else{
    //                 document.getElementById("msg").innerText = "用户名合规"
    //             }
    //         }
    //     });
    // })


    // 这是直接的post请求
    // 作用是在用户填写用户名输入框后（当输入框失去焦点时，即 blur 事件），
    // 发送一个 AJAX 请求到后端，校验该用户名是否已经存在，并在页面上显示提示信息。
    let usernameInput = document.getElementById("username");//通过 DOM API 获取页面上 id="username" 的元素

    usernameInput.addEventListener("blur",function(){//给用户名输入框绑定一个 失去焦点事件（blur） 的监听器；当用户输入完用户名后，点击别的地方，这个事件就会触发；下面的匿名函数是事件触发后的处理逻辑。
        //就按照官方文档来，需要什么参数就传入什么参数：第一个参数是url,第二个参数是要传入的data,第三个参数是回调函数代表请求成功之后要完成的工作：

        //使用 jQuery 的 $.post() 方法发起一个 AJAX POST 请求；
            //第一个参数 "user/checkUserName"：请求地址，通常会被解析为后台接口路径 /user/checkUserName；
            //第二个参数 {username: usernameInput.value}：请求体，发送一个包含当前输入框内容的对象；usernameInput.value 是用户输入的用户名字符串；这就实现了把用户名传送到服务器端进行验证。
            //第三个参数是请求成功后的 回调函数；参数 data 是服务器返回的响应内容；如果服务器返回 "yes"，说明用户名已存在，给用户提示「用户名已经存在」；否则提示「用户名合规」；

        $.post("user/checkUserName",{username: usernameInput.value},
            function(data){
                if(data === "yes"){
                    document.getElementById("msg").innerText = "用户名已经存在"//document.getElementById("msg") 是页面中另一个 DOM 元素（通常是 <span id="msg"></span> 这样的标签），用于展示提示信息。
                }else{
                    document.getElementById("msg").innerText = "用户名合规"
                }
        });
    })
</script>

</body>
</html>
